import React from "react";
import { Form, Modal,  Spin, Button } from "antd";
import { openNotificationWithIcon } from "../../../../utils/comm";

const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12},
  }
  // const formItemLayoutButton = {
  //   labelCol: { span: 0 },
  //   wrapperCol: { span: 12},
  // }
  @Form.create()
class EventCompensate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
  };

  handleCancel = () => {
     const { handleEventCompensateVisible } = this.props;
     handleEventCompensateVisible();
  };

 
  handleSubmit = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handlePay2 } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      handlePay2(values);
    });
  }

  render() {
    const {
      visible,
      eventCompensateLoaded=false,
      eventCompensateData,
      form,
    } = this.props;
     const { getFieldDecorator } = form; // getFieldValue
    return (
      <Modal
        title="事件异常补偿"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width="900px"
        centered
        destroyOnClose
        footer={null}
      >
        <Spin spinning={eventCompensateLoaded}>
          <div style={{height: '400px',width:'800px', display: 'flex', justifyContent: 'center', paddingTop:'20px'}}>
            <Form>
              <Form.Item label="请求url" {...formItemLayout}>
                {getFieldDecorator("requestUrl", { 
                  initialValue :eventCompensateData.requestUrl})
                   (<textarea placeholder="请求url" rows="1" cols="70"  />)}
              </Form.Item>
              <Form.Item label="请求体" {...formItemLayout}>
                {getFieldDecorator("requestJsonParams",{ 
                  initialValue :eventCompensateData.requestJsonParams}
                )(<textarea placeholder="请求体" rows="4" cols="70" />)}
              </Form.Item>
              <Form.Item>
                <div style={{display:'flex', justifyContent:'center'}}>
                  <Button style={{ marginLeft: '5px'}} type="primary" onClick={this.handleSubmit}>
                    <span>补偿</span>
                  </Button>

                  <Button style={{ marginLeft: '10px'}} onClick={this.handleCancel}>
                    <span>取消</span>
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </div>
        </Spin>
      </Modal>
    )
  }
}

export default EventCompensate;